<template>
  <div class="change_pwd_page">
    <van-nav-bar title="修改密码" left-arrow @click-left="goback" />
    <div class="content">
      <van-field
        label="旧密码："
        v-model="old_pwd"
        :type="leixing"
        @input="change"
        center
        clearable
        placeholder="请填写旧密码"
      >
        <template #right-icon>
          <van-icon
            v-if="leixing == 'password'"
            @click="qiehuan_status"
            name="closed-eye"
          />
          <van-icon v-else @click="qiehuan_status" name="eye-o" />
        </template>
      </van-field>
      <van-field
        label="新密码："
        v-model="new_pwd"
        :type="leixing2"
        @input="change"
        center
        clearable
        placeholder="请填写新密码"
      >
        <template #right-icon>
          <van-icon
            v-if="leixing2 == 'password'"
            @click="qiehuan_status2"
            name="closed-eye"
          />
          <van-icon v-else @click="qiehuan_status2" name="eye-o" />
        </template>
      </van-field>
      <div class="xieyi">
        密码长度最少8位， 我们遵从密码自由，没有其他约束，可以纯数字也可以纯字母，也可以混合
      </div>
      <van-button
        :disabled="disabled"
        @click="confirm"
        :class="confirm1"
        type="default"
        >确认</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "change_pwd",
  data() {
    return {
      old_pwd: "",
      new_pwd: "",
      leixing: "password",
      leixing2: "password",
      confirm1: "confirm",
      disabled: true,
      localStorage_inf: JSON.parse(localStorage.getItem("waimai")),
      user_information: "",
    };
  },
  created() {
    this.axios({
      method: "post",
      url: "http://localhost:3000/update_information",
      data: {
        select_user_id: this.localStorage_inf.user_id
      },
    })
      .then((res) => {
        console.log(res)
        this.user_information = res.data.data[0]
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    change() {
      if (this.old_pwd != "" && this.new_pwd.length >= 8) {
        this.disabled = false;
        this.$set(this, "confirm1", "confirm1");
      } else {
        this.disabled = true;
        this.$set(this, "confirm1", "confirm");
      }
    },
    goback() {
      this.$router.go(-1);
    },
    qiehuan_status() {
      if (this.leixing == "password") {
        this.leixing = "number";
      } else {
        this.leixing = "password";
      }
    },
    qiehuan_status2() {
      if (this.leixing2 == "password") {
        this.leixing2 = "number";
      } else {
        this.leixing2 = "password";
      }
    },
    confirm() {
      if (this.old_pwd != this.user_information.user_password) {
        Toast("当前密码错误");
        return;
      }
      var user_id = this.localStorage_inf.user_id;
      var tmp_obj = {
        update_pwd_id: user_id,
        new_pwd: this.new_pwd,
      };
      this.axios({
        method: "post",
        url: "http://localhost:3000/update_information",
        data: tmp_obj,
      })
        .then((res) => {
          console.log(res.data);
          Toast("修改成功");
        
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
/deep/.van-icon {
  color: black;
}
.change_pwd_page {
  height: 100vh;
  background-color: white;
}

/deep/.van-nav-bar__content {
  background-color: rgb(231, 231, 231);
}

/deep/.van-field__label {
  margin-right: 0px;
  width: 4em;
}

.xieyi {
  font-size: 8px;
  margin: auto;
  height: 25px;
  line-height: 25px;
}

.van-cell {
  padding: 0px;
  height: 50px;
  margin: auto;
  font-size: 16px;
  border-bottom: 1px solid grey;
}

.content {
  margin: 50px auto;
  width: 80%;
}

.confirm {
  background-color: rgb(247, 247, 193);
  width: 100%;
  margin: 30px auto;
}

.confirm1 {
  width: 100%;
  margin: 30px auto;
  background-color: rgb(218, 218, 9);
}

.van-button--disabled {
  opacity: 1;
}
</style>